<template>
	<view class="condition-item">
		<view class="condition-item__header" :class="{active:active === `${id}Classify`}">
			{{text}}
			<text class="condition-item__header__desc">{{desc}}</text>
		</view>
		<view class="inline-flex column condition-item__footer">
			<template v-if="options && options.length>0">
				<view v-for="(item,index) of options" :key="index" class="inline-flex fill aic condition"
					:class="selectedOption(item)" @tap.stop="tapOption(item)">
					<image class="inline-flex" :src="item.imageUrl"></image>
					<text>{{item.text}}</text>
				</view>
			</template>
		</view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		name: 'condition-item',
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true,
			styleIsolation: 'shared'
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { computed } from 'vue';
	import { isEmpty } from '@/utils/util';
	export interface Option { multi : boolean; text : string; value : string | number | string[] | number[] }
	const props = withDefaults(defineProps<{
		active : string;
		id : string;
		text : string;
		desc ?: string;
		field : string | string[];
		modelValue : any;
		type : 'radio' | 'checkbox' | 'input' | 'rangeInput' | 'date' | 'daterange';
		dataType ?: 'text' | 'textarea' | 'password' | 'number' | 'idcard' | 'digit';
		placeholder ?: string | string[];
		options ?: Option[];
		start ?: string | number;
		end ?: string | number;
		required ?: boolean;
	}>(), {
		options: () => []
	});

	const emit = defineEmits<{ change : [id: string, fields: [field: string, value: any][]], 'update:modelValue' : [value: any] }>()


	const rangeModelValue = computed(() => {
		return props?.modelValue || [];
	});

	function rangeInputChange(index : number, value : any) {
		let modelValue = rangeModelValue.value;
		if (Array.isArray(modelValue)) {
			modelValue[index] = value;
		} else {
			modelValue = [value]
		}
		emit('update:modelValue', modelValue);
		emit('change', props.id, [[props.field[index], value]]);
	}


	function tapOption(option : Option) {
		if (props.type === 'radio') {
			const value = props.required ? option.value : props.modelValue === option.value ? null : option.value;
			emit('update:modelValue', value);
			emit('change', props.id, [[props.field as string, value]]);
			return;
		}

		if (props.type === 'checkbox') {
			let value = (isEmpty(props.modelValue) ? [] : props.modelValue) as any[];
			if (value.includes(option.value)) {
				value = value.filter(item => item !== option.value);
			} else {
				value.push(option.value);
			}
			if (props.required && value.length <= 0) {
				value.push(option.value);
			}
			emit('update:modelValue', value);
			emit('change', props.id, [[props.field as string, value]]);
			return;
		}

		if (props.type === 'rangeInput') {
			const optionValue = option.value as any[];
			emit('update:modelValue', optionValue);
			emit('change', props.id, [[props.field[0], optionValue[0]], [props.field[1], optionValue[1]]]);
			return;
		}
	}

	function selectedOption(option : Option) {
		if (props.type === 'rangeInput') return '';
		if (props.type === 'radio' && props.modelValue === option.value) return 'selected';
		if (props.type === 'checkbox') {
			return !isEmpty(props.modelValue) && props.modelValue.includes(option.value) ? 'selected' : '';
		}
		return '';
	}
</script>

<style scoped lang="scss">
	.condition-item {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 100%;

		&__header {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			width: 100%;
			height: 128rpx;
			box-sizing: border-box;
			color: #000000;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;

			&__desc {
				color: $uni-secondary-color;
				font-size: 22rpx;
				padding-left: 12rpx;
			}

			&.active {
				&:after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 80rpx;
					height: 3rpx;
					background: #FF710A;
				}
			}
		}

		&__footer {
			.condition {
				padding: 28rpx;

				image {
					width: 112rpx;
					height: 96rpx;
					border-radius: 10rpx;
					background: #843B3B;
				}

				text {
					padding: 0 0 0 24rpx;
					color: #101010;
					font-size: 30rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>